<!--
 * @Date: 2024-11-11 15:49:36
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-06-09 15:39:54
 * @Description: 下拉控件的数据集以及替换字段配置
-->
<template>
  <div>
    <div class="widget-config-setting" v-if="!optionWidget.dataSetHidden">
      <div class="setting-name">数据集设置</div>
      <div class="option-mode-panel">
        <el-radio-group size="small"
          v-model="optionConfig.mode"
          @change="optionModeChange">
          <el-radio-button
            v-for="item in optionState.optionModes"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="setting-body">
        <div v-if="SelectDataType.DICT.equals(optionConfig.mode)"
          class="option-mode-item option-mode-dict"
        >
          <el-form :="settingFormAttrs" :model="optionConfig.dictConfig">
            <el-form-item label="字典类型">
              <el-select :="settingFormSelectAttrs"
                v-model="optionConfig.dictConfig.dictType"
                @change="dictDataTypeChange">
                <el-option v-for="item in optionState.dictTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="字典名称">
              <el-input type="text" readonly placeholder="请选择"
                v-model="optionConfig.dictConfig.dictName"
                :title="optionConfig.dictConfig.dictName">
                <template #append>
                  <el-button type="primary" class="input-select-btn" @click.stop="dictDialogOpen">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="字典参数" v-show="SelectDictDataType.BASE.equals(optionConfig.dictConfig.dictType)">
              <el-button :type="optionConfig.dictConfig.dictParams ? 'primary' : 'info'" plain round @click="codeEditorDialogOpen(SelectDataType.DICT)">编写参数</el-button>
            </el-form-item>
            <el-form-item label="默认选中">
              <el-input placeholder="请输入" v-model="optionModel.defaultValue"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="SelectDataType.SERVE.equals(optionConfig.mode)"
          class="option-mode-item option-mode-serve"
        >
          <el-form :="settingFormAttrs" :model="optionConfig.serveConfig">
            <el-form-item label="请求地址">
              <el-input placeholder="请输入" v-model="optionConfig.serveConfig.url" />
            </el-form-item>
            <el-form-item label="请求方式">
              <el-select :="settingFormSelectAttrs"
                v-model="optionConfig.serveConfig.method"
              >
                <el-option v-for="(item) in optionState.reqTypes"
                  :key="item.value" :label="item.name" :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="参数类型">
              <el-radio-group size="small" v-model="optionConfig.serveConfig.paramsType">
                <el-radio-button v-for="(item) in optionState.reqQaramTypes"
                  :key="item.value" :value="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="请求参数">
              <!-- <el-button type="primary" plain round @click="paramDialogOpen(SelectDataType.SERVE)">编写参数</el-button> -->
              <el-button :type="optionConfig.serveConfig.params ? 'primary' : 'info'" plain round @click="codeEditorDialogOpen(SelectDataType.SERVE)">编写参数</el-button>
            </el-form-item>
            <el-form-item label="默认选中">
              <el-input placeholder="请输入" v-model="optionModel.defaultValue"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="SelectDataType.STATIC.equals(optionConfig.mode)"
          class="option-mode-item option-mode-static"
        >
          <el-form :="settingFormAttrs">
            <el-form-item label="默认值">
              <el-select
                v-model="optionModel.defaultValue"
                :="settingFormSelectAttrs"
                placeholder="请设置默认值"
              >
                <el-option v-for="item in optionConfig.staticConfig.optionItems"
                  :key="item[optionConfig.fieldNames.value]"
                  :label="item[optionConfig.fieldNames.label] || ''"
                  :value="item[optionConfig.fieldNames.value] || ''">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选项配置">
              <el-button type="primary" round plain @click="codeEditorDialogOpen(SelectDataType.STATIC)">编辑</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="widget-config-setting">
      <div class="setting-name">字段替换设置</div>
      <div class="setting-body">
        <div v-for="(value, key) in optionConfig.fieldNames" class="option-field-item">
          <el-input v-model="optionConfig.fieldNames[key]">
            <template #prepend>
              <span style="width: 42px;">{{ key }}</span>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <!-- 数据字典弹窗 -->
    <DictSelectDialog
      ref="dictDialogRef"
      :dictName="optionConfig.dictConfig.dictName"
      :dictType="optionConfig.dictConfig.dictType"
      :enumsDataPools="enumsDataPools"
      @confirm="dictDialogConfirm"
    />
    <!-- 编写参数弹窗 -->
    <CodeEditorDialog
      ref="codeEditorRef"
      :="codeEditorAttrs"
      @confirm="codeEditorDialogConfirm"
    />
  </div>
  
</template>

<script setup>
import XEUtils from 'xe-utils';
import { reactive, computed, inject, ref, watch } from 'vue';
import { RequestTypes, RequestParamTypes } from '@/base/pojo/RequestType.js'
import { SelectDataType, SelectDataTypes, SelectDictDataType, SelectDictDataTypes } from '@/base/pojo/SelectDataType.js'

import { DictSelectDialog, CodeEditorDialog} from '@/components/dialogs'

const props = defineProps({
  designer: { type: Object },
  optionModel: { type: Object },
  selectedWidget: { type: Object }
})

const enumsDataPools = inject('enumsDataPools')

// 组件的选项信息
const optionWidget = computed(() => {
  return {
    // 是否为树形下拉
    isTreeSelect: props.selectedWidget.type === 'tree-select',
    // 数据集是否隐藏
    dataSetHidden: props.selectedWidget.type === 'zoning-unit-tree',
  }
})
// 组件的选项配置
const optionConfig = computed(() => {
  const { optionItemsSelect, optionConfig } = props.selectedWidget.options
  if (!optionConfig.staticConfig) {
    let optionItems = !optionWidget.value.isTreeSelect
      ? [ { "label": "选项一", "value": "1" } ]
      : [  { "label": "选项一", "value": "1", "children": [] } ]
    if (optionItemsSelect && optionItemsSelect.length > 0) {
      optionItems = optionItemsSelect
    }
    props.selectedWidget.options.optionConfig['staticConfig'] = { optionItems }
  }
  return props.selectedWidget.options.optionConfig
})

// 选项配置的数据集
const optionState = reactive({
  reqTypes: RequestTypes.getData(),
  dictTypes: SelectDictDataTypes.getData(),
  optionModes: SelectDataTypes.getData(),
  reqQaramTypes: RequestParamTypes.getData(),
  currentMode: {},
})
/**
 * 选项模式（选项类型）变化
 * 
 * @param value 选择的数据
 */
const optionModeChange = (value) => {
  const dataType = new SelectDataType().getData(value)
  optionState.currentMode = dataType
  const dictDataType = SelectDictDataType.COMMON.getData('', optionWidget.value.isTreeSelect)
  optionConfig.value.fieldNames = dictDataType.field
  // props.optionModel.defaultValue = undefined
  // optionConfig.value.dictConfig = SelectDataType.DICT.config
  // optionConfig.value.serveConfig = SelectDataType.SERVE.config
  // optionConfig.value.staticConfig = SelectDataType.STATIC.config
}
watch(
  () => optionConfig.value.mode,
  (newValue) => {
    optionState.currentMode = new SelectDataType().getData(optionConfig.value.mode)
  },
  { deep: false, immediate: true }
)
// onMounted(() => {
//   optionState.currentMode = new SelectDataType().getData(optionConfig.value.mode)
// })

const dictDialogRef = ref(null)
const dictDialogOpen = () => {
  dictDialogRef.value.handleOpen()
}
const dictDialogConfirm = (row) => {
  optionConfig.value.dictConfig.dictName = row.value
}
const dictDataTypeChange = (value) => {
  const dictDataType = new SelectDictDataType().getData(value, optionWidget.value.isTreeSelect)
  // 重置选中项
  props.optionModel.defaultValue = undefined
  // 还原已修改选项对应字段信息
  optionConfig.value.fieldNames = XEUtils.clone(dictDataType.field, true)
  // 重置字典选项配置
  optionConfig.value.dictConfig.dictName = ''
  optionConfig.value.dictConfig.dictParams = ''
  // 重置静态数据
  // optionConfig.value.staticConfig.optionItems = []
}

const settingFormAttrs = reactive({
  size: 'small',
  class: 'select-options-form',
  labelWidth: '80px',
  labelPosition: 'left',
})
const settingFormSelectAttrs = reactive({
  size: 'small',
  style: { width: '100%' },
  placeholder: '请选择'
})

// 编写参数弹窗
const codeEditorRef = ref(null)
// 编写参数弹窗的属性
const codeEditorAttrs = reactive({
  title: '编写内容',
  showAlert: true,
  showSwitch: true,
  frontAlert: `function ${props.optionModel.name}.params() {`,
  defaultMode: 'javascript',
})
const codeEditorState = reactive({
  // 当前操作的属性
  curAttr: '',
  curAttrContent: '',
})
/**
 * 编写参数弹窗的打开方法
 */
const codeEditorDialogOpen = () => {
  const { name } = props.optionModel
  const { currentMode: mode } = optionState
  // 字典数据
  if (SelectDataType.DICT.equals(mode)) {
    const { dictConfig } = optionConfig.value
    codeEditorAttrs.showSwitch = true
    codeEditorAttrs.frontAlert = ` function ${name}.dictConfig.dictParams() {`
    codeEditorAttrs.defaultMode = 'text'
    codeEditorAttrs.inactiveText = '文本'
    codeEditorRef.value.handleOpen(dictConfig.dictParams)
  }
  // 动态数据
  if (SelectDataType.SERVE.equals(mode)) {
    const { serveConfig } = optionConfig.value
    codeEditorAttrs.showSwitch = true
    codeEditorAttrs.frontAlert = ` function ${name}.serveConfig.params() {`
    codeEditorAttrs.defaultMode = 'javascript'
    codeEditorAttrs.inactiveText = '对象'
    codeEditorRef.value.handleOpen(serveConfig.params)
  }
  // 静态数据
  if (SelectDataType.STATIC.equals(mode)) {
    const { staticConfig } = optionConfig.value
    codeEditorAttrs.showSwitch = false
    codeEditorAttrs.defaultMode = 'javascript'
    codeEditorRef.value.handleOpen(staticConfig.optionItems)
  }
}
/**
 * 编写参数弹窗确定的方法
 * 
 * @param result 编写的内容
 */
const codeEditorDialogConfirm = (result) => {
  const { currentMode: mode } = optionState
  // 字典数据
  if (SelectDataType.DICT.equals(mode)) {
    optionConfig.value.dictConfig.dictParams = result
  }
  // 动态数据
  if (SelectDataType.SERVE.equals(mode)) {
    optionConfig.value.serveConfig.params = result
  }
  // 静态数据
  if (SelectDataType.STATIC.equals(mode)) {
    optionConfig.value.staticConfig.optionItems = result || []
  }
}

</script>

<style lang="scss" scoped>
.option-mode-panel {
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
}
.option-field-item {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
:deep(.input-select-btn) {
  color: #fff !important;
  background-color: #409eff !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.param-dialog-toolbar {
  display: flex;
  .toolbar-item {
    padding-left: 12px;
    margin-right: 8px;
    display: flex;
    align-items: center;
  }
}
// .param-dialog-editor {

// }
</style>